<template>
	<view>
		<view class="topbox">
			<view class="tab_list">
				<view 
					class="tab_li"
					v-for="(item,index) in filterList"
					:key="index"
					:class="{'tab_li_active': item.id == readIndex}"
					@click="changeTab(item)"
				>{{item.name}}</view>
			</view>
		</view> 
		<!-- 客户信息 -->
		<view class="manage_con">
			<view class="clineInfo" v-for="(item,index) in list" :key="index">
				<view class="info_head">
					<view>{{item.memberName ? item.memberName : '散客'}}</view>
				</view>
				<view class="info_main" @click.stop="clientClick(item,index)">
					<view>
						<view class="main_left"> 
							<view class="left_top" style="margin: 30rpx 0;color: #666;font-size: 30rpx;">
								{{item.addTimeStr||''}} 
							</view>
							<view class="left_star"> 
								<view>
									{{item.comsume_info||''}}
								</view>
							</view>
							<view class="left_foot" v-if="item.NursingLog && item.NursingLog.nurse_describe" >
								<view class="l_box">
									<span>{{item.NursingLog.nurse_describe ? item.NursingLog.nurse_describe : ''}}</span>
								</view>
							</view>
							<view class="main_img" v-if="item.file.length != 0" @tap.stop.prevent>
								<image 
									:src="ele.file_path" 
									v-for="(ele,fileindex) in item.file" 
									:key="fileindex" 
									v-if="ele.types == 'image'" 
									class="imgbox" 
									 mode="scaleToFill"
									@click.stop="toPrevieImg(ele.file_path)"
								></image>
							</view>
						</view>
					</view>
					<view class="main_right">
						<image :src="BASE_IMG_URL+'headImg.png'"  mode="scaleToFill">
						</image>
						<view>{{item.staff_name||''}}</view>
					</view>
					
				</view> 
			</view>
			<view style="height: 200rpx;"></view>
			<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
		</view> 
	</view>
</template>

<script>
	import uniTabbar from '@/components/tabbar/tabbar.vue'
	import selectTemp from '@/components/content/selectTemp/selectTemp.vue';
	import {
		customerSortDatas
	} from 'components/content/data/data.js';
	import { BASE_IMG_URL } from '@/util/api.js'
	import {
		customerPageJumps
	} from "../../crm_page_jumps.js";
	import {
		netNursingOrderList
	} from '@/api/kehu.js'
	import {
		netAgentList
	} from '@/api/clues.js'
	export default {
		mixins: [customerPageJumps],
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL,
				
				filterList:[{id:1,name:'提醒中'},{id:2,name:'已完成'},{id:3,name:'全部'}],
				readIndex:1, 
				queryObj: {},
				page: 1,
				totalPage: 1,
				limit: 10,
				list: [],
				//默认 筛选条件
				de_type: 100,
				de_starttime: '',
				de_endtime: '',
				de_staffid: null,
				tipNumber: null,
				isAdd:true,
			}
		},
		components: {
			selectTemp,
			uniTabbar
		},
		onLoad(options) {
			if (options.id) {
				this.queryObj.memberId = options.id
			}
		},
		onShow() {
			this.getTip()
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				return
			}
			this.page++
			this.getList()
		},
		methods: {
			
			//筛选 已读  未读
			changeTab(item) {
				this.readIndex = item.id
				this.page = 1
				this.list = []
				this.getList()
			},
			 getTip() {
			 	this.list = []
			 	this.page = 1
			 	this.totalPage = 1
			 	//获取客户 列表
			 	this.getList()
			 },
			queryData(params) {
				console.log(params)
				this.queryObj = params
				this.list = []
				this.page = 1
				this.getList()
			},
			getList() {
				let follupStatus = '';
				console.log("=========")
				if(this.readIndex == 1) {
					follupStatus = '0'
				} else if(this.readIndex == 2) {
					follupStatus = '1'
				}
				let params = {
					page: this.page,
					limit: this.limit, 
					follupStatus: follupStatus,
					...this.queryObj
				}
				netNursingOrderList(params).then(res => {
					res = res.data
					this.list = this.list.concat(res.list) 
					this.page = res.page
					this.totalPage = res.totalPage
				})
			}, //查看 图片
			toPrevieImg(file) {
				uni.previewImage({
					urls: [file]
				})
			},
			// 跳转到详情页面
			clientClick(item,index) { 
				if(!item.finished) {
					uni.navigateTo({
						url:'/pagesA/crm/customerManagement/nursinglog/nursinglog?id='+item.id
					})
				} else {
					uni.navigateTo({
						url:'/pagesA/crm/customerManagement/nursinglog/nursinglogDetail?id='+item.logid,
						success:()=>{
							let arr = this.lists
							arr[index].is_read = 1
							this.lists = arr
						}
					})
				}
				
			},
		}
	}
</script>

<style lang="scss">
	.topbox{
		width:750rpx;
		height:80rpx;
		background:#fff;
		.tab_list{
			padding:0 24rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.tab_li{
				width:120rpx;
				font-size:30rpx;
				color:#666;
				height:80rpx;
				margin-right:40rpx;
				line-height: 80rpx;
				flex-shrink: 0;
				text-align: center;
			}
			.tab_li_active{
				color:#000;
				position: relative;
				&::after{
					content:'';
					width:60rpx;
					height:6rpx;
					background:#03aa96;
					position: absolute;
					bottom:0;
					left:50%;
					transform: translateX(-50%);
				}
			}
		}
	} 
	.querylist{
		margin:40rpx 0 30rpx;
		padding:0 30rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.queryfir{
			box-shadow: 2rpx 2rpx 50rpx rgba(0,0,0,0.1);
			background:#fff;
			border-radius: 8rpx;
		}
		.form_right{
			width:180rpx;
			height:50rpx;
			font-size:22rpx;
			color:#666;
			text-align: center;
			line-height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.bottomimg{
				width:20rpx;
				height:33rpx;
				margin-left:15rpx;
			}
		}
	}
	.clineInfo {
		background-color: #fff;
		padding: 30rpx 45rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);

		.info_head {
			display: flex;
			justify-content: space-between;

			:first-child {
				font-size: 34rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.info_main {
			display: flex;
			justify-content: space-between;

			.main_left {
				.left_followUp {
					display: flex;
					padding-bottom: 30rpx;
					font-size: 30rpx;
					color: #666;
				}

				.left_star {
					font-size: 30rpx;
					color: #666;
					display: flex;
					padding-bottom: 30rpx;
				}

				.left_foot {
					padding-bottom: 20rpx;

					.l_box {
						margin-right: 35rpx;
						float: left;

						span {
							background: rgba(3, 170, 150, .1);
							padding: 5rpx 12rpx;
							font-size: 26rpx;
							color: #03AA96;
							border-radius: 5rpx;
						}
					}
				}
			}

			.main_right {
				text-align: center;
				padding: 20rpx 15rpx 0 0;

				image {
					border-radius: 50%;
					width: 129rpx;
					height: 129rpx;
					margin-bottom: 5rpx;
				}
			}
		}

		.info_footer {
			display: flex;
			justify-content: space-around;
			padding-top: 30rpx;
			height: 80rpx;
			border-top: 1px solid #ededed;
			margin-top: 20rpx;

			.footer_content {
				// width: 25%;
				line-height: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 15rpx;
				}
				.icon-iconmore-copy,
				.icon-follow {
					font-size: 22rpx;
				}

				.icon-follow,
				.icon-task,
				.icon-tel {
					margin-right: 5rpx;
				}

				.icon-iconmore-copy {
					margin-left: 5rpx;
					margin-top: 2rpx;
				}
			}
		}
	}

	.icon_creat {
		position: fixed;
		z-index: 1;
		bottom: 180rpx;
		right: 80rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
</style>
